<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>04.custom-component-simple-local</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <my-component></my-component>
            <my-component></my-component>
            <my-component></my-component>
        </div>

        <script type="text/javascript">
            // TODO:组件的简便创建与局部注册
            let vm = new Vue({
                el: '#app',
                components: {
                    MyComponent: {
                        data() {
                            return {
                                title:'The VueJs Instance',
                            };
                        },
                        template:`
                            <div>
                                <h1>{{ title }}</h1>
                                <button @click="title = 'changed'">修改标题</button>
                            </div>
                        `,
                    },
                },
            });
            console.log(vm);
        </script>
    </body>
</html>
